<template>
  <el-table :data="tableData" border stripe>
    <el-table-column prop="name" label="角色" width="180" />
    <el-table-column prop="address" label="资源权限">
      <template #default="scope">
        <template v-for="item in scope.row.checkbox" :key="item">
          <el-checkbox :label="item" v-model="value1" />
        </template>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default>
        <el-button size="small"> Add </el-button>
        <el-button size="small" type="danger"> Delete </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";
const currentPage4 = ref(1);
const value1 = ref(true);
const pageSize4 = ref(100);
const tableData = [
  {
    date: "2016-05-03",
    name: "管理人",
    checkbox: ["Option A", "Option B"],
  },
  {
    date: "2016-05-02",
    name: "Tom1",
    checkbox: ["Option A"],
  },
  {
    date: "2016-05-04",
    name: "Tom2",
    checkbox: ["Option A", "Option B", "Option C"],
  },
  {
    date: "2016-05-01",
    name: "Tom3",
    checkbox: ["Option A", "Option B", "Option C", "Option D"],
  },
];
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
<style lang="scss" scoped></style>
